import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/checkpoint/dungeons.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/checkpoint/actions.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/checkpoint/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_eve_plugin/utils/toast_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class CheckpointItemWidget extends StatelessWidget {
  final int index;
  final DungeonsList data;
  const CheckpointItemWidget({Key key, this.index, this.data})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(checkpointStateViewModel:
              CheckpointStateViewModel(itemFunc: (stageid) {
            updateStageID(store, stageid);
            Navigator.pushNamed(context, RouteConstant.CheckpointRankPage);
          })));
    }, builder: (context, vm) {
      return GestureDetector(
        onTap: () {
          if (data?.unlocked == 1) {
            vm.yeXiuStateViewModel.checkpointStateViewModel
                .itemFunc(data?.id ?? '');
          } else {
            Toast.showYX(context, '君莫笑等级不足');
          }
        },
        child: Padding(
          padding: EdgeInsets.only(left: setRatio(14.5), right: setRatio(14.5)),
          child: Stack(
            children: <Widget>[
              Opacity(
                opacity: 0.7,
                child: Container(
                  height: setRatio(91),
                  width: setRatio(346),
                  decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            color: Color(0x4D000000),
                            offset: Offset(setRatio(3), setRatio(3)),
                            blurRadius: setRatio(10),
                            spreadRadius: setRatio(3))
                      ],
                      border: Border.all(
                          color: Color(0xFFC1C4C9), width: setRatio(1)),
                      image: DecorationImage(
                        image: NetworkImage(data?.pic ?? ''),
                        fit: BoxFit.fitWidth,
                      ),
                      borderRadius: BorderRadius.circular(setRatio(5))),
                ),
              ),
              Opacity(
                opacity: 0.1,
                child: Container(
                  height: setRatio(91),
                  width: setRatio(346),
                  decoration: BoxDecoration(
                      gradient: LinearGradient(colors: [
                    Color(0xFF505761),
                    Color(0xFF747E8B),
                  ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
                ),
              ),
              Container(
                height: setRatio(91),
                width: setRatio(346),
                child: Padding(
                  padding:
                      EdgeInsets.only(left: setRatio(22), right: setRatio(12)),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        '副本',
                        // shadow: Color(0x80000000),
                        style: TextStyle(
                            letterSpacing: setRatio(1),
                            fontStyle: FontStyle.italic,
                            fontFamily: FontFamily.PINGFANG,
                            fontWeight: FontWeightCustom.PF_Medium,
                            fontSize: setTextSp(15),
                            color: Color(0xFFFFFFFF)),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Text(
                            data?.name ?? '',
                            // shadow: Color(0x80000000),
                            style: TextStyle(
                                letterSpacing: setRatio(2),
                                fontStyle: FontStyle.italic,
                                fontFamily: FontFamily.PMZD,
                                fontSize: setRatio(23),
                                color: Color(0xFFFFFFFF)),
                          ),
                          Expanded(
                            child: Container(),
                          ),
                          data?.unlocked == 1
                              ? Text(
                                  'boss进度: ${data.complete}/${data.total}',
                                  style: TextStyle(
                                      fontFamily: FontFamily.PINGFANG,
                                      fontWeight: FontWeightCustom.PF_Medium,
                                      fontSize: setTextSp(12),
                                      color: Color(0xFFFFFFFF)),
                                )
                              : Container(),
                          SizedBox(
                            width: setRatio(5),
                          ),
                          data?.unlocked == 1
                              ? Image.asset(
                                  imageUtilYeXiu(
                                      'checkpoint/icon_checkpoint_right_arrow@3x'),
                                  width: setRatio(14),
                                  height: setRatio(14),
                                )
                              : Container()
                        ],
                      )
                    ],
                  ),
                ),
              ),
              data?.unlocked == 1
                  ? Container()
                  : Opacity(
                      opacity: 0.7,
                      child: Container(
                        //左右，上下减 2像素
                        height: setRatio(89),
                        width: setRatio(344),
                        margin: EdgeInsets.only(
                            left: setRatio(1), top: setRatio(1)),
                        decoration: BoxDecoration(
                          color: Color(0xFF000000),
                          borderRadius: BorderRadius.circular(
                            setRatio(5),
                          ),
                        ),
                      )),
              data?.unlocked == 1
                  ? Container()
                  : Positioned(
                      top: setRatio(32),
                      right: setRatio(29),
                      child: Container(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.end,
                          children: <Widget>[
                            Text(
                              '未开启',
                              style: TextStyle(
                                  fontFamily: FontFamily.PINGFANG,
                                  fontWeight: FontWeightCustom.PF_Medium,
                                  fontSize: setTextSp(12),
                                  color: Color(0xFFFFFFFF)),
                            ),
                            Text('开启条件：${data?.unlockLevel ?? 0}级',
                                style: TextStyle(
                                    fontFamily: FontFamily.PINGFANG,
                                    fontWeight: FontWeightCustom.PF_Medium,
                                    fontSize: setTextSp(12),
                                    color: Color(0xFFFF4C4C))),
                          ],
                        ),
                      ),
                    ),
              data?.unlocked == 1
                  ? Container()
                  : Positioned(
                      top: setRatio(-1),
                      right: setRatio(-1),
                      child: Container(
                        width: setRatio(23),
                        height: setRatio(22),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(imageUtilYeXiu(
                                    'checkpoint/icon_checkpoint_item_lock@3x')))),
                      ),
                    )
            ],
          ),
        ),
      );
    });
  }
}
